<template>

  <div>
    <div style="margin-bottom: 10px;">
      <el-button size="small" type="primary" @click="addDevice">新增</el-button>
    </div>

    <DeviceList></DeviceList>
    <Edit ref="editDialog"></Edit>

  </div>

</template>

<script lang="ts" setup>
import {ref, nextTick, onMounted, watch, onUnmounted} from "vue";
import axios from "axios";
import Edit from "./components/Edit.vue"
import DeviceList from "@/components/DeviceList.vue";

const websocketList = [];

const editDialog = ref();

function addDevice() {
  editDialog.value.open();
}

interface Message {
  text: string;
  time: Date;
}



const messages = ref<Array<Message>>([]);

function sendMessage(device:any) {
  const deviceId = device.id;
  const messageNew = device.messageNew;
  const data = {
    deviceId: deviceId,
    message: messageNew
  }
  request('device/addMessage', 'post', data).then(response => {
    device.messageNew = '';
  });

}

function scrollToBottom() {
  const chatLog = document.getElementById("chat-log");
  if (chatLog) {
    chatLog.scrollTop = chatLog.scrollHeight;
  }
}

function shutdown(device: any) {
  request('device/shutdown/'+device.id, 'put').then((response) => {
    device.running = false;
  })
}

function start(device: any) {
  request('device/start/'+device.id, 'put').then((response) => {
    device.running = true;
  })
}

function del(device: any) {
  request('device/del/'+device.id, 'delete').then((response) => {
      deviceList.value.splice(deviceList.value.indexOf(device), 1);
  })
}



scrollToBottom(); // 初始化滚动到底部

</script>

<style scoped>

</style>

